<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, nofollow">

    <title>{{.Title}}</title>

    <link rel="stylesheet" href="/style.css">
  </head>

  <body>
    <script>
      function setSrcQuery(e, q) {
        var src = e.src;
        var p = src.indexOf('?');
        if (p >= 0) {
          src = src.substr(0, p);
        }
        e.src = src + "?" + q
      }
      function playAudio() {
        var le = document.getElementById("lang");
        var lang = le.options[le.selectedIndex].value;
        var e = document.getElementById('audio')
        setSrcQuery(e, "lang=" + lang)
        e.style.display = 'block';
        e.autoplay = 'true';
        return false;
      }
      function changeLang() {
        var e = document.getElementById('audio')
        if (e.style.display == 'block') {
          playAudio();
        }
      }
      function reload() {
        setSrcQuery(document.getElementById('image'), "reload=" + (new Date()).getTime());
        setSrcQuery(document.getElementById('audio'), (new Date()).getTime());
        return false;
      }
    </script>
    <main>
      <h1>{{.Title}}</h1>
      <div class="alerts">
       {{ range $key, $value := .Alerts }}
          <div class="alert {{ $key }}">{{ $value }}</div>
       {{ end }}
      </div>

      <form method="post">
        <label for="username">Username</label>
        <input id="username" name="username" value="{{.Username}}" type="text" required autofocus>

        <label for="old-password">Old password</label>
        <input id="old-password" name="old-password" type="password" required>

        <label for="new-password">New password</label>
        <input id="new-password" name="new-password" type="password"
            pattern="{{.Pattern}}" x-moz-errormessage="{{.PatternInfo}}" required>

        <label for="confirm-password">Confirm new password</label>
        <input id="confirm-password" name="confirm-password" type="password"
        pattern="{{.Pattern}}" x-moz-errormessage="{{.PatternInfo}}" required>
        <p>{{.PatternInfo}}</p>
        <p>Type the numbers you see in the picture below:</p>
        <p>
          <img id=image src="/captcha/{{.CaptchaId}}.png" alt="Captcha image">
        </p>
        <a href="#" onclick="reload()">Reload</a>
        <input type=hidden name=captchaId value="{{.CaptchaId}}">
        <br>
        <input id="captchaSolution" name="captchaSolution" type="text" required>
        <button type="submit">Update password</button>
      </form>


    </main>
  </body>
</html>
